<template>
    <div style="width: 100%;height: 100%;overflow:hidden;">
        <Card style="height: 100%;">
            <template #title>
                <div style="display: flex;justify-content: space-between">
                    <div>
                        <Button ghost icon="md-add" type="primary" @click="selectItem = {};showEditVIew = true">
                            添加
                        </Button>
                    </div>
                    <Form :label-width="80" inline>
                        <FormItem label="新闻标题">
                            <Input v-model="parms.keywords" placeholder="请输入新闻标题查询" type="text"></Input>
                        </FormItem>
                        <FormItem label="状态:" prop="statuz">
                            <Select style="width: 100px;" v-model="parms.statuz" placeholder="请选择账号状态">
                                <Option value="all">全部</Option>
                                <Option value="1">启用</Option>
                                <Option value="0">禁用</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="类型:" prop="category">
                            <Input v-model="parms.category" placeholder="请输入类型查询" type="text"></Input>
                        </FormItem>
                        <Button style="margin-left: 10px;" type="primary" @click="search">查询
                        </Button>
                    </Form>
                </div>
            </template>
            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                <div ref="body" style="flex: 1;overflow:hidden;">
                    <Table :columns="columns" :data="queryList" :height="h" highlight-row
                           stripe>
                        <template slot="statuz" slot-scope="{ row }">
                            <Tag v-if="row.statuz == 1" color="blue">启用</Tag>
                            <Tag v-if="row.statuz == 0" color="red">禁用</Tag>
                        </template>
                        <template slot="caozuo" slot-scope="{ row }">
                            <Button size="small" style="margin-right:10px;" type="primary"
                                    @click="selectItem = row;showEditVIew = true">
                                修改
                            </Button>
                            <Button size="small" style="margin-right:10px;" type="error" @click="deleteAdmin(row)">
                                删除
                            </Button>
                        </template>
                    </Table>
                </div>
                <div class="footer">
                    <div style="text-align: right">
                        <Page :current="parms.pageIndex" :page-size="parms.pageSize" :total="parms.total" show-sizer
                              show-total style="margin-top: 10px;" @on-page-size-change="pageChange"
                              @on-change="nextPage"/>
                    </div>
                </div>
                <Modal v-model="showEditVIew" :title="Object.keys(selectItem).length ? '修改新闻' : '添加新闻'"
                       footer-hide>
                    <user-edit v-if="showEditVIew" :selectItem="selectItem" @add="add" @edit="edit"/>
                </Modal>
            </div>
        </Card>
    </div>
</template>

<script>
import UserEdit from "@/view/demo/edit.vue";
import moment from "moment";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "demo",
    components: {UserEdit},
    data() {
        return {
            showEditVIew: false,
            columns: [
                {title: "序号", type: "index", width: 80, align: "center"},
                {title: "标题", key: "title"},
                {title: "副标题", key: "deputyTitle"},
                {title: "类型", key: "category"},
                {title: "内容", key: "content"},
                {title: "状态", key: "statuz", slot: "statuz"},
                {title: "日期", key: "createTime"},
                {title: "操作", slot: "caozuo", width: 320}
            ],
            parms: {
                pageIndex: 1,
                pageSize: 10,
                statuz: 'all',
                keywords: '',
                category: ''
            },
            dataList: [],
            queryList: [],
            h: 0,
            selectItem: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            let element = this.$refs['body'];
            let observer = new ResizeObserver((e) => {
                this.h = e[0].contentRect.height
            });
            this.$nextTick(() => {
                observer.observe(element); // 监听元素
            })
            this.h = this.$refs.body.offsetHeight
        })
        this.getData()
    },
    watch: {
        dataList() {
            this.parms.total = this.dataList.length;
        }
    },
    methods: {
        search() {
            let dataList = JSON.parse(JSON.stringify(this.dataList));
            if (this.parms.statuz === 'all') {
                this.queryList = dataList;
            } else {
                this.queryList = dataList.filter(item => item.statuz == this.parms.statuz)
            }
            if (this.parms.keywords) {
                this.queryList = dataList.filter(item => item.title.indexOf(this.parms.keywords) > -1)
            }
            if (this.parms.category) {
                this.queryList = dataList.filter(item => item.category.indexOf(this.parms.category) > -1)
            }
        },
        // 分页
        nextPage(page) {
            this.parms.pageIndex = page;
            this.getData();
        },
        pageChange(pageSize) {
            this.parms.pageSize = pageSize;
            this.getData();
        },

        getData() {
            let data = [
                {
                    id: '1231',
                    title: '新闻标题',
                    deputyTitle: '副标题',
                    category: '热点',
                    content: '新闻内容内容内容内容内容内容内容内容内容内容内容内容',
                    statuz: 1,
                    createTime: '2020-01-01 12:12:12',
                }
            ]
            this.queryList = data;
            this.dataList = data;
        },
        add(row) {
            row.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
            this.dataList.push(row);
            this.queryList = this.dataList;
            this.$Message.success('添加成功');
            this.showEditVIew = false
        },
        edit(row) {
            let index = this.dataList.findIndex(item => item.id === row.id)
            this.dataList.splice(index, 1, row)
            this.queryList = this.dataList;
            this.$Message.success('修改成功');
            this.showEditVIew = false
        },
        deleteAdmin(row) {
            this.$Modal.confirm({
                title: '提示',
                content: '确定要删除吗？',
                onOk: () => {
                    let index = this.dataList.findIndex(item => item.id === row.id)
                    this.dataList.splice(index, 1)
                    this.queryList = this.dataList;
                    this.$Message.success('删除成功');
                }
            })
        }
    }
}
</script>

<style scoped>
/deep/ .ivu-card {
    display: flex;
    flex-direction: column;
}

/deep/ .ivu-card-body {
    flex: 1;
}

</style>
